<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 社交网络</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 顶部导航栏 */
        .main-header {
            background-color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0d6efd;
            text-decoration: none;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
        }
        
        .nav-icon {
            color: #6c757d;
            font-size: 1.25rem;
            margin-left: 1.5rem;
            position: relative;
            transition: color 0.2s ease;
        }
        
        .nav-icon:hover {
            color: #0d6efd;
        }
        
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -8px;
            background-color: #dc3545;
            color: white;
            font-size: 0.7rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 侧边栏导航 */
        .sidebar {
            background-color: white;
            border-right: 1px solid #eee;
            padding: 1.5rem 0;
            height: calc(100vh - 56px);
            position: sticky;
            top: 56px;
            overflow-y: auto;
        }
        
        .profile-summary {
            padding: 0 1.5rem 1.5rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
        .sidebar-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1rem;
            border: 3px solid #f1f5f9;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            margin-bottom: 0.25rem;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1.5rem;
            color: #495057;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        
        .sidebar-menu a:hover, .sidebar-menu a.active {
            background-color: #e6f0ff;
            color: #0d6efd;
        }
        
        .sidebar-menu i {
            width: 20px;
            text-align: center;
        }
        
        .menu-section {
            font-size: 0.85rem;
            text-transform: uppercase;
            color: #6c757d;
            padding: 1rem 1.5rem 0.5rem;
            font-weight: 500;
        }
        
        /* 主内容区域 */
        .main-content {
            padding: 2rem;
        }
        
        .page-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 卡片样式 */
        .dashboard-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .card-title {
            font-weight: 600;
            font-size: 1.25rem;
            margin: 0;
        }
        
        .card-action {
            color: #0d6efd;
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }
        
        .stat-info {
            flex: 1;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        
        .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        /* 动态和通知列表 */
        .activity-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .activity-item {
            padding: 1rem 0;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 1rem;
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-header {
            margin-bottom: 0.25rem;
        }
        
        .activity-author {
            font-weight: 600;
            color: #333;
        }
        
        .activity-text {
            color: #495057;
        }
        
        .activity-time {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                position: fixed;
                left: -250px;
                top: 56px;
                width: 250px;
                transition: left 0.3s ease;
                z-index: 999;
            }
            
            .sidebar.active {
                left: 0;
            }
            
            .mobile-menu-toggle {
                display: block !important;
            }
            
            .overlay {
                position: fixed;
                top: 56px;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,0.5);
                z-index: 998;
                display: none;
            }
            
            .overlay.active {
                display: block;
            }
        }
        
        @media (max-width: 768px) {
            .search-bar {
                display: none;
            }
            
            .main-content {
                padding: 1rem;
            }
            
            .stats-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .nav-icon {
                margin-left: 1rem;
                font-size: 1.1rem;
            }
            
            .page-title {
                font-size: 1.5rem;
            }
        }
        
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.25rem;
            color: #6c757d;
            margin-right: 1rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center py-3">
                <div class="d-flex align-items-center">
                    <button class="mobile-menu-toggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <a href="#" class="logo">社交圈</a>
                </div>
                
                <div class="search-bar mx-auto">
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill border-right-0" placeholder="搜索...">
                        <button class="btn btn-outline-secondary rounded-pill border-left-0" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="d-flex align-items-center">
                    <a href="#" class="nav-icon">
                        <i class="fas fa-home"></i>
                    </a>
                    <a href="#" class="nav-icon">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </a>
                    <a href="#" class="nav-icon">
                        <i class="fas fa-envelope"></i>
                        <span class="notification-badge">5</span>
                    </a>
                    <a href="#" class="nav-icon">
                        <i class="fas fa-cog"></i>
                    </a>
                    <a href="#" class="ms-3">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle" width="36" height="36">
                    </a>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 移动端遮罩层 -->
    <div class="overlay"></div>
    
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏导航 -->
            <aside class="col-lg-3 col-md-4 sidebar">
                <div class="profile-summary">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="sidebar-avatar">
                    <h3 class="mb-0">李明</h3>
                    <p class="text-muted mb-2">@limingdesign</p>
                    <a href="#" class="btn btn-primary btn-sm rounded-pill">编辑资料</a>
                </div>
                
                <span class="menu-section">个人中心</span>
                <ul class="sidebar-menu">
                    <li><a href="#" class="active"><i class="fas fa-tachometer-alt"></i> 仪表盘</a></li>
                    <li><a href="#"><i class="fas fa-user"></i> 个人资料</a></li>
                    <li><a href="#"><i class="fas fa-image"></i> 我的相册</a></li>
                    <li><a href="#"><i class="fas fa-comment"></i> 我的动态</a></li>
                    <li><a href="#"><i class="fas fa-bookmark"></i> 我的收藏</a></li>
                    <li><a href="#"><i class="fas fa-heart"></i> 我的点赞</a></li>
                </ul>
                
                <span class="menu-section">社交</span>
                <ul class="sidebar-menu">
                    <li><a href="#"><i class="fas fa-users"></i> 我的好友 <span class="ms-auto badge bg-secondary">356</span></a></li>
                    <li><a href="#"><i class="fas fa-user-plus"></i> 好友请求 <span class="ms-auto badge bg-primary">8</span></a></li>
                    <li><a href="#"><i class="fas fa-star"></i> 关注的人 <span class="ms-auto badge bg-secondary">128</span></a></li>
                    <li><a href="#"><i class="fas fa-eye"></i> 访客记录 <span class="ms-auto badge bg-secondary">42</span></a></li>
                </ul>
                
                <span class="menu-section">设置</span>
                <ul class="sidebar-menu">
                    <li><a href="#"><i class="fas fa-cog"></i> 账号设置</a></li>
                    <li><a href="#"><i class="fas fa-bell"></i> 通知设置</a></li>
                    <li><a href="#"><i class="fas fa-shield-alt"></i> 隐私设置</a></li>
                    <li><a href="#"><i class="fas fa-question-circle"></i> 帮助中心</a></li>
                    <li><a href="#"><i class="fas fa-sign-out-alt text-danger"></i> 退出登录</a></li>
                </ul>
            </aside>
            
            <!-- 主内容区域 -->
            <main class="col-lg-9 col-md-8 main-content">
                <div class="page-title">
                    <span>个人中心</span>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i> 发布动态
                    </button>
                </div>
                
                <!-- 统计数据卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon bg-primary">
                            <i class="fas fa-user-friends"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">356</div>
                            <div class="stat-label">好友</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon bg-success">
                            <i class="fas fa-comment"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">248</div>
                            <div class="stat-label">动态</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon bg-warning">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">4.8k</div>
                            <div class="stat-label">获赞</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon bg-info">
                            <i class="fas fa-eye"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">1.2k</div>
                            <div class="stat-label">粉丝</div>
                        </div>
                    </div>
                </div>
                
                <!-- 最新通知 -->
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">最新通知</h3>
                        <a href="#" class="card-action">查看全部</a>
                    </div>
                    
                    <ul class="activity-list">
                        <li class="activity-item">
                            <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="activity-avatar">
                            <div class="activity-content">
                                <div class="activity-header">
                                    <span class="activity-author">王小红</span>
                                    <span class="activity-text">赞了你的动态</span>
                                </div>
                                <div class="activity-time">10分钟前</div>
                            </div>
                        </li>
                        
                        <li class="activity-item">
                            <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="activity-avatar">
                            <div class="activity-content">
                                <div class="activity-header">
                                    <span class="activity-author">张伟</span>
                                    <span class="activity-text">评论了你的照片："这张拍得真棒！"</span>
                                </div>
                                <div class="activity-time">1小时前</div>
                            </div>
                        </li>
                        
                        <li class="activity-item">
                            <img src="https://picsum.photos/id/67/100/100" alt="用户头像" class="activity-avatar">
                            <div class="activity-content">
                                <div class="activity-header">
                                    <span class="activity-author">刘芳</span>
                                    <span class="activity-text">请求添加你为好友</span>
                                </div>
                                <div class="d-flex gap-2 mt-2">
                                    <button class="btn btn-sm btn-primary">同意</button>
                                    <button class="btn btn-sm btn-outline-secondary">忽略</button>
                                </div>
                                <div class="activity-time">3小时前</div>
                            </div>
                        </li>
                        
                        <li class="activity-item">
                            <img src="https://picsum.photos/id/68/100/100" alt="系统通知" class="activity-avatar">
                            <div class="activity-content">
                                <div class="activity-header">
                                    <span class="activity-author">系统通知</span>
                                    <span class="activity-text">你的账号已成功升级为高级会员</span>
                                </div>
                                <div class="activity-time">昨天 15:30</div>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- 最近动态 -->
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">我的最近动态</h3>
                        <a href="#" class="card-action">查看全部</a>
                    </div>
                    
                    <ul class="activity-list">
                        <li class="activity-item">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="activity-avatar">
                            <div class="activity-content">
                                <div class="activity-header">
                                    <span class="activity-author">你</span>
                                    <span class="activity-text">发布了新动态</span>
                                </div>
                                <p class="activity-text mt-1">周末去了郊外的创意园区，发现了很多有趣的设计和艺术装置。</p>
                                <div class="d-flex gap-2 mt-2">
                                    <img src="https://picsum.photos/id/1048/100/100" alt="动态图片" class="rounded" width="80" height="80">
                                    <img src="https://picsum.photos/id/1025/100/100" alt="动态图片" class="rounded" width="80" height="80">
                                </div>
                                <div class="activity-time mt-2">今天 10:23 · 
                                    <span class="me-3"><i class="far fa-thumbs-up"></i> 128</span>
                                    <span><i class="far fa-comment"></i> 32</span>
                                </div>
                            </div>
                        </li>
                        
                        <li class="activity-item">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="activity-avatar">
                            <div class="activity-content">
                                <div class="activity-header">
                                    <span class="activity-author">你</span>
                                    <span class="activity-text">上传了5张新照片到相册《设计作品集》</span>
                                </div>
                                <div class="d-flex gap-2 mt-1">
                                    <img src="https://picsum.photos/id/180/100/100" alt="相册图片" class="rounded" width="60" height="60">
                                    <img src="https://picsum.photos/id/181/100/100" alt="相册图片" class="rounded" width="60" height="60">
                                    <img src="https://picsum.photos/id/182/100/100" alt="相册图片" class="rounded" width="60" height="60">
                                    <div class="rounded bg-light d-flex align-items-center justify-content-center" width="60" height="60" style="width:60px;height:60px">+2</div>
                                </div>
                                <div class="activity-time mt-2">昨天 16:45 · 
                                    <span class="me-3"><i class="far fa-thumbs-up"></i> 86</span>
                                    <span><i class="far fa-comment"></i> 15</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </main>
        </div>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 移动端菜单切换
            const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
            const sidebar = document.querySelector('.sidebar');
            const overlay = document.querySelector('.overlay');
            
            mobileMenuToggle.addEventListener('click', function() {
                sidebar.classList.toggle('active');
                overlay.classList.toggle('active');
            });
            
            overlay.addEventListener('click', function() {
                sidebar.classList.remove('active');
                overlay.classList.remove('active');
            });
            
            // 侧边栏菜单激活状态
            const menuItems = document.querySelectorAll('.sidebar-menu a');
            menuItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    menuItems.forEach(link => link.classList.remove('active'));
                    
                    // 添加当前激活状态
                    this.classList.add('active');
                    
                    // 移动端点击后关闭菜单
                    if (window.innerWidth <= 992) {
                        sidebar.classList.remove('active');
                        overlay.classList.remove('active');
                    }
                });
            });
            
            // 模拟通知和消息标记点击清除
            const notificationIcons = document.querySelectorAll('.nav-icon');
            notificationIcons.forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.preventDefault();
                    const badge = this.querySelector('.notification-badge');
                    if (badge) {
                        badge.remove();
                    }
                });
            });
        });
    </script>
</body>
</html>

